<template>
	<div>
		<div class="title">热销推荐</div>
		<router-link 
			tag="li"
			class="item border-bottom" 
			v-for="item of list" 
			:key="item.id"
			:to="'/detail/'+item.id"
		>
			<img class="item-img" :src="item.imgUrl" />
			<div class="item-info">
				<p class="item-title">{{item.title}}</p>
				<p class="item-desc">{{item.desc}}</p>
				<button class="item-btn">查看详情</button>
			</div>
		</router-link>
	</div>
</template>

<script>
export default{
	name:'HomeRecommend',
	props:{
		list:Array
	}
}
</script>

<style lang="stylus" scoped>
.title
  background-color:#ccc
  height:.64rem
  line-height:.64rem
  text-indent:.2rem
  margin-top:.2rem
.item
  height:1.9rem
  display:flex
  .item-img
    width:1.7rem
    height:1.7rem
    padding:.1rem
  .item-info
    flex:1
    padding:.1rem
    min-width:0
    .item-title
      line-height:.54rem
      font-size:.32rem
      overflow:hidden
      white-space:nowrap
      text-overflow:ellipsis
    .item-desc
      line-height:.4rem
      color:#ccc
      overflow:hidden
      white-space:nowrap
      text-overflow:ellipsis
    .item-btn
      line-height:.44rem
      margin-top:.2rem
      background-color:#ff9300
      color:#fff
      padding:0 .1rem
      border-radius:.1rem
</style>